<template>
  <div class="login-container">
    <h2 class="login-title">欢迎您 使用动画视频系统</h2>
    <!-- <div class="clear-loading spinner">
      <span></span>
    </div> -->
    <!-- <div class="earthBox" ref="pie2"></div> -->
    <a-form class="login-form">
      <h2 class="title">{{ type == 1 ? '登录' : type == 2 ? '注册' : '修改密码' }}</h2>
      <a-form-item>
        <a-input v-model="account" placeholder="请输入用户名" size="large" class="loginInput">
          <a-icon slot="prefix" type="user" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input-password v-model="password" :placeholder="type == 3 ? '请输入修改密码' : '请输入密码'" size="large"
          class="loginInput">
          <a-icon slot="prefix" type="unlock" />
        </a-input-password>
      </a-form-item>
      <a-form-item v-if="type != 1">
        <a-input-search placeholder="请输入验证码" v-model="code" enter-button="获取验证码" size="large" @search="onSearch" />
      </a-form-item>
      <!-- <a-form-item>
        <div class="box">
          <a-input v-model="code" placeholder="请输入验证码" class="codeInput">
            <a-icon slot="prefix" type="safety-certificate" />
          </a-input>
          <div class="codeImg">
            <img src="../../static/image/toux.gif" alt="" />
          </div>
        </div>
      </a-form-item> -->

      <!-- 验证 -->
      <dragVerify ref="dragVerify" :width="406" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过"
        handlerIcon="double-right" successIcon="check" @passcallback="passcallback" class="dragVerify" v-if="type == 1">
        <i v-show="!isPassing" slot="textBefore"></i>
      </dragVerify>
      <a-form-item>
        <a-button class="submit" type="primary" @click="onSubmit">{{ type == 1 ? '登录' : type == 2 ? '注册' : '修改密码' }}
        </a-button>
      </a-form-item>
      <!-- <div class="forgetT">
        <div v-if="type == 1">
          <span @click="type = 2">去注册</span> <span @click="type = 3">忘记密码？</span>
        </div>
        <div v-else>
          <span @click="type = 1">去登录</span>
        </div>
      </div> -->
    </a-form>
  </div>
</template>

<script>
import { earth } from '../../static/earth.js'
import dragVerify from "../components/dragVerify.vue"
import { login, getUserInfo } from "../http/api"
export default {
  data () {
    return {
      account: "",
      password: "",
      code: "",
      type: 1,
      isPassing: false,
    }
  },
  watch: {
    type (newT, oldT) {
      this.account = ''
      this.password = ''
      this.code = ''
      this.isPassing = false
    }
  },
  mounted () {
    // setTimeout(() => {
    //   earth(this.$echarts.init(this.$refs.pie2));
    // })
  },
  created () {
    if (localStorage.getItem("userInfo")) {
      this.$router.replace({ path: "/index" })
      //重置路由
      this.resetRout()
    }
  },
  methods: {
    onSearch () {
      console.log(1123)
    },
    // 验证
    passcallback () {
      console.log("验证通过！", this.isPassing)
    },
    // reset() {
    //   this.isPassing = false;
    //   this.$refs.dragVerify.reset();
    // },
    //登录
    onSubmit (e) {
      if (this.account != "" && this.password != "") {
        if (this.isPassing) {
          this.login(this.account, this.password)
        } else {
          this.$tishi("error", "请完成拖拽验证！")
        }
      } else {
        this.$tishi("error", "账号或密码不能为空！")
      }
    },
    async login (account, password) {
      const parameter = {
        "$url": "adminLogin",
        "account": account,
        "password": password,
      }
      const res = await login(parameter)
      console.log(res)
      if (res.code == 200) {
        this.$tishi("success", res.msg)
        // this.$store.dispatch('user/ybUserInfo', res.userInfo.data[0]) 
        //将用户信息记录在本地缓存中
        localStorage.setItem('userInfo', JSON.stringify(res.userInfo.data[0]))
        this.$router.replace({ path: "/index" })
        //重置路由
        this.resetRout()
        // this.getUserInfo()
      } else {
        this.$tishi("warning", res.msg)
      }
    },

    //重置路由
    resetRout () {
      var arr = [
        { path: "/index", name: "index", meta: { title: "首页" } },
        {
          path: "/index/statistics",
          name: "statistics",
          meta: { title: "数据统计" },
        },
      ]

      localStorage.setItem("routeList", JSON.stringify(arr))
      localStorage.setItem("key", "4")
      localStorage.setItem("headerText", "数据统计 Data List")

    },

    async getUserInfo () {
      const res = await getUserInfo()
      console.log('用户信息', res.result.data.results[0])
      this.$store.dispatch('user/ybUserUn', res.result.data.results[0].shopName)
      this.$store.dispatch('user/ybShopId', res.result.data.results[0].shopId)
      this.$router.replace({ path: "/index" })
    },
  },
  components: {
    dragVerify,
  },
}
</script>
<style scoped>
/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../static/image/bg.jpg");
  /* background-repeat: no-repeat; */
  background-size: 100% 100%;
  background-position: 100% 100%;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Log */
.login-title {
  color: #fff;
  text-align: center;
  font-size: 36rem;
  font-family: Microsoft Yahei;
  position: absolute;
  top: 70rem;
  left: 100rem;
  font-family: cursive;
}

.login-form {
  width: 565px;
  margin: auto;
  background: url("../../static/image/login_input.png");
  background-size: 100% 100%;
  padding: 40px 80px;
}

/* 登陆按钮 */
.submit {
  width: 100%;
  height: 45px;
  font-size: 16px;
}

/* 用户登陆标题 */
.title {
  margin-bottom: 20px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  font-family: Microsoft Yahei;
}

.box {
  widows: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.codeInput {
  width: 60%;
}

.codeImg {
  widows: 35%;
  height: 60px;
}

.codeImg img {
  width: 120px;
  height: 50px;
  display: block;
  margin-top: 5px;
  border-radius: 3px;
}

.dragVerify {
  margin-bottom: 30px;
}

.earthBox {
  width: 450rem;
  height: 450rem;
  margin: 0 0 0 140rem;
}

.forgetT {
  width: 100%;
  text-align: right;
  color: white;
  cursor: pointer;
}

.forgetT span:nth-child(1) {
  margin-right: 15rem;
}

/*-- spinner effect --*/
.clear-loading {
  text-align: center;
  margin: 0em auto;
  position: relative;
  box-sizing: border-box;
}

.spinner {
  width: 60rem;
  height: 60rem;
}

.spinner>span,
.spinner>span:before,
.spinner>span:after {
  content: "";
  display: block;
  border-radius: 50%;
  border: 2rem solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.spinner>span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-left-color: transparent;
  -webkit-animation: effect-2 2s infinite linear;
  -moz-animation: effect-2 2s infinite linear;
  -o-animation: effect-2 2s infinite linear;
  animation: effect-2 2s infinite linear;
}

.spinner>span:before {
  width: 75%;
  height: 75%;
  border-right-color: transparent;
}

.spinner>span:after {
  width: 50%;
  height: 50%;
  border-bottom-color: transparent;
}

@-webkit-keyframes effect-2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes effect-2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*-- //spinner effect --*/
</style>
